<template>
	<view class="page-error-recovery">
		<u-navbar title="添加纠错" back-icon-color="#000" :border-bottom="false"
		title-size="36" title-color="#000" title-bold></u-navbar>
		<view class="form-warp">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="110" label="姓名" prop="name">
					<u-input v-model="form.name" placeholder="请输入姓名" />
				</u-form-item>
				<u-form-item label-width="110" label="手机号" prop="mobile">
					<u-input v-model="form.mobile" placeholder="请输入手机号"/>
				</u-form-item>
				<u-form-item label-width="110" label="内容" prop="intro">
					<u-input type="textarea" :auto-height="true" v-model="form.intro"/>
				</u-form-item>
			</u-form>
			<u-button type="error" shape="circle" class="custom-style" @click="submit">提交</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {commonGet} from '@/api/commonapi.js'
	export default {
		data() {
			return {
				form: {
					name: '',
					intro: '',
					mobile: ''
				},
				rules: {
					name: [
						{
							required: true,
							message: '请输入姓名',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						}
					],
					intro: [
						{
							min: 5,
							message: '不能少于5个字',
							trigger: 'change'
						}
					],
					mobile: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		methods: {
			submit(){
				let _this = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						let query = {
							ak:_this.$store.state.token,
							cmd:"nEbook_add",
							para:JSON.stringify({
								"pageid":"3330",
								"id":"",
								"xm":_this.form.name,
								"dh":_this.form.mobile,
								"nr":_this.form.intro
							})
						}
						commonGet(query,({Message})=>{
							if(Message == "操作成功！"){
								this.$refs.uToast.show({
									title: '提交成功',
									type: 'success',
									url: '/pages/HomeLnner/error-recovery/error-recovery'
								})
							}else{
								this.$refs.uToast.show({
									title: '提交失败',
									type: 'error'
								})
							}
							
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
.navbar-right{
	padding-right: 30rpx;
}
.form-warp{
	padding: 0 30rpx;
}
.custom-style{
	color: #fff;
	background-color: #c40200;
	width: 406rpx;
	height: 92rpx;
	border-radius: 92rpx;
	margin: 116rpx auto;
	font-size: 30rpx;
}

</style>
